import './style.less'

import React, { useRef } from 'react'
import { onGetCouponListXhr, onPostDeleteCouponXhr } from '@/api/coupon'
import ATablePage from '@/components/ATablePage'
import { useNavigate } from 'react-router-dom'
import { Tag } from 'antd'
import { ExclamationCircleFilled } from '@ant-design/icons'
import AToast from '@/components/AToast'
import { Modal } from 'antd'

const { confirm } = Modal
const Coupon = () => {
  const navigate = useNavigate()
  const tablePageRef = useRef(null)
  const handleDelete = async (id, info) => {
    if (!id) return AToast.warning('优惠券id不存在')
    confirm({
      title: '确认删除该优惠券?',
      icon: <ExclamationCircleFilled />,
      content: `优惠券:${info?.name}`,
      okText: '确认',
      okType: 'danger',
      cancelText: '取消',
      onOk: async () => {
        try {
          const res = await onPostDeleteCouponXhr({ id })
          if (res?.success) {
            AToast.success('删除优惠券成功')
            tablePageRef.current?.tableRefresh() // 刷新列表
          } else {
            AToast.error(`删除优惠券失败: ${res?.errMsg}`)
          }
        } catch (e) {
          AToast.error(`删除优惠券失败: ${e}`)
        }
      },
    })
  }
  const filterList = [
    {
      label: '优惠券ID',
      name: 'couponId',
    },
    {
      label: '优惠券名称',
      name: 'couponName',
    },
    {
      label: '状态',
      name: 'status',
      type: 'select',
      defaultValue: '',
      options: [
        {
          label: '全部',
          value: '',
        },
        {
          label: '禁用',
          value: -1,
        },
        {
          label: '上架',
          value: 1,
        },
      ],
    },
  ]
  const columns = [
    {
      title: '#',
      dataIndex: 'id',
      width: 100,
    },
    {
      title: '券名称',
      dataIndex: 'productInfo',
      width: 160,
      render: (_, record) => {
        const { name, deductionDuration, expLabel } = record || {}
        return (
          <div className="code-info">
            <div>
              券名称：<span className="feild-text">{name || '--'}</span>
            </div>
            <div>
              抵扣时长：
              <span className="link-text">{deductionDuration || '--'}</span>
            </div>
            <div>
              有效期：<span className="link-text">{expLabel || '--'}</span>
            </div>
          </div>
        )
      },
    },
    {
      title: '库存信息',
      dataIndex: 'stockInfo',
      width: 120,
      render: (_, record) => {
        const { stockQuantity, releasedQuantity } = record || {}
        return (
          <div className="code-info">
            <div className="label">
              库存：<span className="feild-text">{stockQuantity || '0'}</span>
            </div>
            <div className="label">
              已领取：
              <span className="feild-text">{releasedQuantity || '0'}</span>
            </div>
          </div>
        )
      },
    },
    {
      title: '状态',
      dataIndex: 'status',
      width: 120,
      render: (v) => {
        return (
          <div className="code-info stauts">
            {Number(v) === 1 ? (
              <Tag color="success">上架</Tag>
            ) : (
              <Tag color="error">禁用</Tag>
            )}
          </div>
        )
      },
    },
    {
      title: '操作',
      dataIndex: 'operation',
      width: 120,
      render: (_, record) => {
        return (
          <div>
            <a
              onClick={() =>
                navigate(`/page/product/coupon/addCoupon?id=${record.id}`)
              }
              className="a-link"
              style={{ color: '#3D86EE' }}
            >
              编辑
            </a>
            <a
              onClick={() =>
                navigate(
                  `/page/product/coupon/addCoupon?id=${record.id}&type=detail`
                )
              }
              style={{ color: '#3D86EE' }}
              className="a-link"
            >
              查看
            </a>
            <a
              onClick={() => handleDelete(record?.id, record)}
              style={{ color: '#D60D25' }}
              className="a-link"
            >
              删除
            </a>
          </div>
        )
      },
    },
  ]

  const actionList = [
    {
      label: '新增',
      onClick: () => {
        navigate('/page/product/coupon/addCoupon')
      },
    },
  ]

  return (
    <ATablePage
      ref={tablePageRef}
      filter={{
        filterList,
        column: 3,
      }}
      table={{
        columns,
        bordered: true,
        request: {
          xhr: onGetCouponListXhr,
        },
        // initData: listMock,
      }}
      className="verification-page"
      actionList={actionList}
    />
  )
}
export default Coupon
